<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<style type="text/css">
			/* <![CDATA[ */
			html, body {
				width: 100%;
				height: 100%;
				margin: 0px;
				padding: 0px;
				font: 12px 'Lucida Grande';
			}
			#container-page {
				height: auto;
				top: 0; left: 0;
			}
			#container-content {
				position: relative;
				min-height: 100%;
				width: 100%;
				margin: 0px auto;
			}
			#container-footer {
				text-align: center;
				position: relative;
				border-top: 2px solid #ccc;
				padding-top: 1em;
				margin: -4em auto 0 auto;
				width: 100%;
			}
			#search-area {
				text-align: center;
				border-bottom: 2px solid #ccc;
				padding: 0.5em 1em 0.4em 1em;
				min-width: 480px;
			}
			#search-area h1 {
				font-size: 16pt;
				float: left;
				margin: 0px 45px 5px 15px;
				padding-bottom: 0.5em;
			}
			#search-area form {
				float: left;
				padding-top: 2px;
			}
			#search-panel {
				float: left;
				padding: 1.2em auto;
			}
			#output-area {
				padding-bottom: 5em;
			}
			#rails-image {
				float: left;
			}
			table.plugins {
				width: 90%;
			}
			table.plugins td.home, table.plugins td.svn, table.plugins td.install {
				width: 50px;
			}
			a {
				color: #666;
			}
			.success {
				border: 2px solid #99ff66; background-color: #eeffdd;
				padding: 0.8em;
				margin: 0.5em;
			}
			.failure {
				border: 2px solid #ff9966; background-color: #ffeedd;
				padding: 0.8em;
				margin: 0.5em;
			}
			.loading {
				border: 2px solid #9999ff; background-color: #eeeeff;
				padding: 0.8em;
				margin: 0.5em;
			}
			/* ]]> */
		</style>
		<script src="file://<%= File.join(TextMate.bundle_support, "javascripts", "prototype.js") %>" type="text/javascript" charset="utf-8"></script>
		<title>Install a Plugin</title>
	</head>
	<body>
		<div id="container-page">
			<div id="container-content">
				<div id="search-area">
					<img src="file://<%= File.join(TextMate.bundle_support, 'images') %>/rails.png" width="43" height="56" id="rails-image">
					<div id="search-panel">
						<h1>Plugin Search</h1>
						<form id="search-form" onsubmit="Plugin.search(this.search.value); return false;">
							<input type="text" name="search" id="search" />
							<input type="submit" value="Go" />
						</form>
					</div>
					<div style="clear:both"></div>
				</div>
				<div id="output-area"></div>
			</div>
			<div id="container-footer">
				Install the TextMate Footnotes Plugin
			</div>
		</div>
	</body>
	<script type="text/javascript" charset="utf-8">
		function escapeEntities(text) {
			return text.replace(/</m, "&lt;").replace(/>/m, "&gt;").replace(/&/m, "&amp;");
		}

		Plugin = Class.create();

		// Class settings
		Plugin.curlCommand = "curl -s -L -H 'Accept: application/xml'";
		Plugin.directoryURL = "http://agilewebdevelopment.com/plugins/search";
		Plugin.errorOutput = 'output-area';
		Plugin.statusOutput = 'output-area';

		// Class methods
		Plugin.Methods = {
			clearStatus: function() {
				$(Plugin.statusOutput).innerHTML = "";
			},

			printStatus: function(message, className) {
				if (!className) className = "success";
				var html = "<div class=\"" + className + "\">" + message + "</div>";
				$(Plugin.statusOutput).innerHTML += html;
			},

			printError: function(message) {
				var html = "<div class=\"failure\">";
				html += message;
				html += "</div>";
				$(Plugin.errorOutput).innerHTML = html;
			},

			getXML: function(searchTerm) {
				var url = Plugin.directoryURL;
				if (searchTerm) url += "?search=" + escape(searchTerm);

				var command = Plugin.curlCommand + " " + url;
				var response = TextMate.system(command, null);

				if (response.errorString) {
					var message = "<h2>Error retrieving XML from " + Plugin.directoryURL + "</h2>";
					message += "<code><pre>" + escapeEntities(response.errorString) + "</pre></code>";
					Plugin.printError(message);
					return null;
				}

				return (new DOMParser().parseFromString(response.outputString, 'text/xml'));
			},

			search: function(searchTerm) {
				var pluginNodes = Plugin.getXML(searchTerm).getElementsByTagName('plugin');
				var plugins = $A();
				for (var i = 0; i < pluginNodes.length; i++) {
					var plugin = new Plugin(pluginNodes[i]);
					plugins.push(plugin);
				}
				var table = Plugin.toTable(plugins);
				$(Plugin.statusOutput).innerHTML = "";
				$(Plugin.statusOutput).appendChild(table);
				return false;
			},

			install: function(url) {
				var output = document.getElementById('output');
				var command = "cd <%= root %>; ruby script/plugin install " + url;
				Plugin.clearStatus();
				Plugin.printStatus(command + "<br>Installing...", "loading");

				var response = TextMate.system(command, null);
				if (response.errorString) {
					Plugin.printError(response.errorString);
				} else {
					Plugin.printStatus("<code><pre>" + escapeEntities(response.outputString) + "</pre></code>");
				}
			},

			toTable: function(plugins) {
				var table = document.createElement('table');
				table.align = "center";
				table.className = "plugins";
				for (var i = 0; i < plugins.length; i++) {
					table.appendChild(plugins[i].toRow());
				}
				return table;
			}
		};

		Object.extend(Plugin, Plugin.Methods);

		Plugin.prototype = {
			initialize: function(xmlNode) {
				this.name						= this.getValue(xmlNode, 'name');
				this.rating					= this.getValue(xmlNode, 'rating');
				this.license				= this.getValue(xmlNode, 'license');

				this.homeURL				= this.getValue(xmlNode, 'home');
				this.repositoryURL	= this.getValue(xmlNode, 'repository');
				this.summaryURL			= this.getValue(xmlNode, 'link');
			},

			getValue: function (xmlNode, key, defaultValue) {
				try {
					return xmlNode.getElementsByTagName(key)[0].firstChild.nodeValue;
				} catch(e) {
					return (defaultValue || null);
				}
			},

			toRow: function() {
				var row = document.createElement("tr");

				var cell = document.createElement("td");
				cell.className = "name"
				cell.appendChild(this.createLink({text: this.name, href: this.summaryURL}));
				row.appendChild(cell);

				cell = document.createElement("td");
				cell.className = "home";
				if (this.homeURL && this.homeURL != "")
					cell.appendChild(this.createLink({image: "home.gif", href: this.homeURL}));
				row.appendChild(cell);

				cell = document.createElement("td");
				cell.className = "svn";
				if (this.repositoryURL && this.repositoryURL != "")
					cell.appendChild(this.createLink({image: "svn.png", href: this.repositoryURL}));
				row.appendChild(cell);

				cell = document.createElement("td");
				cell.className = "install";
				<% if enable_install %>
				if (this.repositoryURL && this.repositoryURL != "") {
					var link = this.createLink({
						image: "install.gif",
						href: "#",
						onclick: function() { Plugin.install(this.repositoryURL); }.bind(this)
					});
					cell.appendChild(link);
				}
				<% end %>
				row.appendChild(cell);

				return row;
			},

			createLink: function(options) {
				var link = document.createElement('a');
				link.href = options["href"];
				link.onclick = options["onclick"];
				if (options["text"]) {
					link.appendChild(document.createTextNode(options["text"]));
				} else if (options["image"]) {
					var img = document.createElement("img");
					img.src = "file://<%= File.join(TextMate.bundle_support, 'images') %>/" + options["image"];
					link.appendChild(img);
				}
				return link;
			}
		}
	</script>
</html>